import React, { useState } from 'react'
import { NavBar } from 'react-vant';
import { useNavigate } from 'react-router-dom'
import { Search } from 'react-vant';
import './index.scss'
const Index: React.FC = () => {
    const [value, setValue] = useState('');
    const navigate = useNavigate()
    const sous = () => {
        navigate('/homesearch')
    }
    const okjjs = () => {
        navigate('/sryisheng')
    }
    const doxiao = () => {
        navigate('/doxiao')
    }
    const zhaoyiyuan =()=>{
        navigate('/zhaoyiyuan')
    }
    const departments = [
        {
            name: '内科',
            doctors: 201294,
            subDepartments: [
                { name: '心血管内科' },
                { name: '神经内科' },
                { name: '消化内科' },
                { name: '内分泌科' },
                { name: '免疫科' },
                { name: '呼吸与危重症' },
                { name: '肾内科' },
            ],
        },
        {
            name: '外科',
            doctors: 135888,
            subDepartments: [
                { name: '神经外科' },
                { name: '功能神经' },
                { name: '心血管外科' },
                { name: '胸外科' },
                { name: '整形外科' },
                { name: '乳腺外科' },
                { name: '泌尿外科' },
            ],
        },
        {
            name: '儿科学',
            doctors: 63894,
            subDepartments: [
                { name: '儿科' },
                { name: '新生儿科' },
                { name: '儿童保健科' },
                { name: '儿童消化科' },
                { name: '儿童呼吸科' },
                { name: '儿童血液科' },
                { name: '儿童泌尿外' },
            ],
        },
        {
            name: '妇产科',
            doctors: 78896,
            subDepartments: [
                { name: '妇产科' },
                { name: '产科' },
                { name: '妇科' },
                { name: '计划生育科' },
                { name: '生殖医学科' },
                { name: '妇幼保健科' },
                { name: '妇泌尿科' },
            ],
        },
        {
            name: '眼科',
            doctors: 22897,
            subDepartments: [
                { name: '眼科' },
                { name: '眼底病科' },
                { name: '角膜病科' },
                { name: '眼眶病科' },
                { name: '白内障科' },
                { name: '小儿眼科' },
                { name: '眼底病科' },
            ],
        },
        {
            name: '口腔科',
            doctors: 40950,
            subDepartments: [
                { name: '口腔科' },
                { name: '口腔正畸科' },
                { name: '口腔种植科' },
                { name: '口腔颌面外' },
                { name: '口腔内科' },
                { name: '口腔儿童科' },
                { name: '口腔预防科' },
            ],
        },
        {
            name: '其他',
            doctors: 342903,
            subDepartments: [
                { name: '耳鼻喉' },
                { name: '皮肤科' },
                { name: '男科' },
                { name: '职业病科' },
                { name: '口腔内科' },
                { name: '烧伤科' },
                { name: '康复科' },
            ],
        },
        // 其他科室数据...
    ];

    return (
        <div>
            <NavBar fixed={true}
                title="我的医生"
                leftText="返回"
                onClickLeft={() => navigate(-1)}
            />
            <div style={{ marginTop: '40px' }} onClick={sous}>
                <Search value={value} onChange={setValue} clearable placeholder="请输入搜索关键词" />
            </div>
            <div className='huhuhu'>
                <div className='huhuhu-1'>
                    <img src="src/img/haohao-001.png" alt=""/>
                    <p>按疾病找</p>
                </div>
                <div className='huhuhu-2' >
                    <img src="src/img/haohao-002.png" alt=""  onClick={zhaoyiyuan}/>
                    <p>按医院找</p>
                </div>
            </div>
            <div className='hgyg1'>
                <div>
                    {departments.map((department, index) => (
                        <div key={index} className="department">
                            <h4>{department.name} ({department.doctors}位医生)</h4>
                            <ul className="department-list">
                                {department.subDepartments.map((subDepartment, subIndex) => (
                                    <li key={subIndex} onClick={okjjs}>{subDepartment.name}</li>
                                ))}
                                <li onClick={doxiao}>更多...</li>
                            </ul>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    )
}

export default Index
